import React, { useEffect, useState } from 'react'

export default function Test() {
  console.log('test执行了')
  const [x, setX] = useState('哈哈')
  // useEffect模拟了三个生命周期钩子函数.分别是: componentDidMount, componentDidUpdate,componentWillUnmount
  //   useEffect(() => {
  //     return () => {}
  //   },数组)
  // 第一种情况: 如果不传入数组这个参数.则外面的函数模拟的是挂载和更新.里面模拟的是卸载
  //   useEffect(() => {
  //     console.log('test挂载或更新了')
  //     // 订阅
  //     return () => {
  //         //取消订阅
  //       console.log('test即将卸载了')
  //     }
  //   })

  // 第二种情况: 如果传递了数组这个数据,并且写的是空数组,则外层函数只模拟挂载,不模拟更新.内部的还是卸载
  //   useEffect(() => {
  //     console.log('test挂载或更新了')
  //     // 订阅
  //     return () => {
  //       //取消订阅
  //       console.log('test即将卸载了')
  //     }
  //   }, [])
  // 第三种情况:如果传递了数组,并在数组中传入了state或props数据,则表示要监听传入的数据,如果监听的数据发生变化,则外层函数模拟更新.如果监听的数据没有发生变化,则外层函数不模拟更新
  useEffect(() => {
    console.log('test挂载或更新了')
    // 订阅
    return () => {
      //取消订阅
      console.log('test即将卸载了')
    }
  }, [x]) // []中传入了状态x,则表示要监听这个x

  return (
    <div>
      Test,{' '}
      <button
        onClick={() => {
          setX('嘿嘿')
        }}
      >
        setX
      </button>
    </div>
  )
}
